<template>
  <a-tabs v-model:activeKey="activeKey" tab-position="left" class="h-full">
    <a-tab-pane key="1" tab="流程审核" class="h-full pd-20px">
      <a-modal width="600px" title="信息提示" v-model:open="msgModalOpen" destroyOnClose>
        <div class="msgModal">
          <p>
            <CheckCircleOutlined
              class="mr-8px"
              :style="{
                color: errorMsg.resType == 'success' ? '#55a532' : '#bd2c00',
                fontSize: '24px',
              }"
            />{{ errorMsg.resType == 'success' ? '操作成功' : '操作失败' }}</p
          >
          <p
            ><InfoCircleOutlined
              class="mr-8px"
              :style="{
                color: errorMsg.resType == 'success' ? '#55a532' : '#bd2c00',
                fontSize: '24px',
              }"
            />{{ errorMsg.resTypeMsg }}</p
          >
          <p
            ><SnippetsOutlined
              class="mr-8px"
              :style="{
                color: errorMsg.resType == 'success' ? '#55a532' : '#bd2c00',
                fontSize: '24px',
              }"
            />{{
              errorMsg.resType == 'success'
                ? '您可以在已办任务中，查看流程审核轨迹。'
                : '您可联系管理员检查流程配置是否正确。'
            }}</p
          >
        </div>

        <template #footer>
          <a-button
            type="primary"
            v-if="errorMsg.resType == 'error'"
            @click="() => (msgModalOpen = false)"
            >确定</a-button
          >
          <a-button
            type="primary"
            v-if="errorMsg.resType == 'success'"
            :loading="loading"
            @click="handleMsgModalOk"
            >确定</a-button
          >
        </template>
      </a-modal>     
      <headerToolbar 
      :previewConfig="previewConfig"
      @cancel="handleMsgModalOk" 
      @savedraft="approveToolbarSaveDraft">
      </headerToolbar>
        <userApproveToolbar     
        ref='approveToolbarRef'           
        :previewConfig="previewConfig" 
        :previewFormObj="previewFormObj" 
        @cancel="handleMsgModalOk"         
      ></userApproveToolbar>
      
    </a-tab-pane>
    <a-tab-pane key="2" tab="审批轨迹">
      <a-alert message="审批轨迹图" type="success" class="mb-16px text-18px font-bold"></a-alert>
      <a-card class="mb-20px">
        <a-image :fallback="constants.noPic" :src="trackImg" />
      </a-card>
      <a-alert message="审批轨迹表" type="success" class="mb-16px text-18px font-bold"></a-alert>
      <a-card>      
      </a-card>
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts" setup>
  import { ref, nextTick, reactive, onMounted, watch } from 'vue';
  import { SchemaForm } from '@/components/core/schema-form';
  import { schemas } from './useApprovalForm';
  import { SnippetsOutlined, CheckCircleOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';
  import { approvalTableStates } from './useApprovalTable';
  import type { SchemaFormProps, SchemaFormInstance } from '@/components/core/schema-form';
  import preview from '@/components/form/preview.vue';
  import { useApproveToolbar } from './useApproveToolbar';
  import { isEmpty, isNullOrUnDef } from '@/utils/is/';
  import { getTrack, getApprovalTracks, downLoadFile } from '@/api/flow/review';
  import { useTable } from '@/components/core/dynamic-table';
  import constants from '@/utils/constants';
  import userApproveToolbar from './userApproveToolbar.vue';
  import headerToolbar from './headerToolbar.vue';
  
  const approveToolbarRef = ref()
  const approveToolbarSaveDraft = () => {
    approveToolbarRef.value.saveHeaderDraft() 
  }


  const props = defineProps({
    previewFormObj: {
      type: Object as any,
      default: {
        itemList: [],
        formConf: {},
      },
    },
    previewConfig: {
      type: Object as any,
      default: {},
    },
  });
  const emit = defineEmits(['cancel']);

  // 当前主键
  const bussid = ref('');
  // 当前tab页key
  const activeKey = ref('1');

  // 提示信息弹窗
  const msgModalOpen = ref(false);
  const handleMsgModalOk = () => {
    msgModalOpen.value = false;
    emit('cancel');
  }; 

  const errorMsg = reactive({
    //默认信息类型
    resType: 'suecess',
    //默认提示信息
    resTypeMsg: '',
  });

  const previewRef = ref(null);
  const previewIframeRef = ref(null);
  const previewIframeUrl = ref(undefined);

  // 轨迹图
  const trackImg = ref<any>();

  const showPreview = ref(false);
  const loading = ref(false);

  const dynamicForm = ref<SchemaFormInstance>();
  const formProps: SchemaFormProps = {
    schemas,
    labelWidth: 120,
    actionColOptions: { span: 24 },
    showActionButtonGroup: false,
  };
  // 点击提交
  function confirm() {
    console.log('dynamicForm.value', dynamicForm.value?.formModel);
    dynamicForm.value?.validate().then(() => console.log('验证通过！'));
  }
  
  // 获取轨迹图
  const queryTackPic = async () => {
    const res = await getTrack({
      processInstanceId: props.previewConfig.procinstid,
      porcessKey: props.previewConfig.processDefinitionId ? props.previewConfig.processDefinitionId:"",
    });
    if (res && res.data) {
      trackImg.value = window.URL.createObjectURL(res.data);
    }
  };  
  // 文件下载
  const handleFileDownLoad = async (url, filename) => {
    downLoadFile(url, filename);
  };

  const [DynamicTable, dynamicTableInstance] = useTable(approvalTableStates as any);

  watch(
    () => props.previewConfig,
    () => {
      if (props.previewConfig.form_type == '0') {
        showPreview.value = true;
        loading.value = false;
      }
    },
    {
      immediate: true,
    },
  );

  onMounted(() => {    
   queryTackPic();
  });
</script>

<style lang="less">
  .msgModal {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;

    p {
      width: 400px;
      font-size: 18px;
    }
  }
</style>
<style lang="less" scoped>
  .flex-buttom-box {
    display: flex;
    flex-wrap: wrap-reverse;
    gap: 10px;
  }
</style>
